import React, { useEffect, useState } from 'react';
import TopNav from '../../components/TopNav/TopNav';
import { Card, Button, Popup, Input, Form } from 'react-vant';
import LineChart from './Echarts/LineChart';
import axios from 'axios';
import './website.css';
import { useNavigate } from 'react-router';

const Website = () => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [data, setData] = useState([]);
  const navigate = useNavigate();

  // 获取json数据  
  const Init = async () => {
    const res = await axios.get('http://192.168.0.154:3000/my/website');
    setData(res.data);
    console.log(res.data);
  };

  // 添加网站  
  const addWebsite = async () => {
    // 获取表单的所有值  
    const values = await form.validateFields();
    const newWebsite = {
      title: values.ProjectName,
      pages: values.ProjectUser,
      description: values.ProjectDesc,
      logo: "../Website/Project/logo1.png"
    };

    try {
      const res = await axios.post('http://192.168.0.154:3000/my/website', newWebsite);
      console.log(res);
      // 成功后重新初始化数据  
      Init();
      setVisible(false); // 关闭弹出框  
    } catch (error) {
      console.error('Error adding website:', error);
    }
  };

  // 初始化进行挂载  
  useEffect(() => {
    Init();
  }, []);

  return (
    <div>
      <TopNav />
      <div style={{ width: '90%', margin: '0 auto', marginTop: '30px' }}>
        <p style={{ fontSize: '30px' }}>网站项目</p>
        <div style={{ marginTop: '15px', height: '1200px' }} key={data.id}>
          <Card round>
            <Card.Header style={{ fontSize: '12px', color: '#828895' }}>当前项目</Card.Header>
            <Card.Body>
              <div>
                <div>
                  <p style={{ fontSize: '40px' }}>10</p>
                  <p style={{ color: '#80dd8c' }}>增长 +3</p>
                  <p style={{ fontSize: '12px' }}>上个月正在进行的项目 -7</p>
                </div>
                <div>
                  <LineChart />
                </div>
              </div>
            </Card.Body>
          </Card>
          {data.map((item) => (
            <Card style={{ marginTop: '20px', height: '150px' }} round key={item.id}
              onClick={() => navigate('/websitedetail', { state: { item: item } })}
            >
              <Card.Header>
                <img src={item.logo} style={{ width: '50px' }} alt={item.title} />
              </Card.Header>
              <Card.Body>
                <div>
                  <p>{item.title}</p>
                  <p>{item.pages}</p>
                </div>
              </Card.Body>
            </Card>
          ))}
          <Button color='#598dff' round className='Btn' onClick={() => setVisible(true)}>+</Button>
          <Popup style={{ width: '90%', borderRadius: '10px' }} visible={visible} onClose={() => setVisible(false)}>
            <Form
              form={form}
              onFinish={(values) => console.log(values)} // 你可以选择根据需求处理此处  
              footer={
                <div style={{ margin: '16px 16px 0' }}>
                  <Button round nativeType='submit' type='primary' block onClick={addWebsite}>
                    提交
                  </Button>
                </div>
              }
            >
              <Form.Item
                tooltip={{
                  message: '项目名称为团队开发的项目名称，用于区分不同项目，请勿重复，一旦创建无法修改',
                }}
                rules={[{ required: true, message: '请填写项目名称' }]}
                name='ProjectName'
                label='项目名称'
              >
                <Input placeholder='请输入项目名称' />
              </Form.Item>
              <Form.Item
                rules={[{ required: true, message: '请填写项目页数' }]}
                name='ProjectUser'
                label='页数'
              >
                <Input placeholder='请输入项目页数' />
              </Form.Item>
              <Form.Item
                label='项目描述'
                name='ProjectDesc'
                rules={[{ required: true, message: '请填写项目描述' }]}
              >
                <Input.TextArea placeholder="多行输入" />
              </Form.Item>
            </Form>
          </Popup>
        </div>
      </div>
    </div>
  );
};

export default Website;